<template>
	<view @click.stop="closeMask" class="input_mask" :style="{top:topPxValue,height:inputMaskHeight}" v-show="topShowCopy">
		<view class="search_box" @click.stop="maskStop">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import {ref,watchEffect} from "vue";
	let props = defineProps(['topVal','topShow'])
	let emit = defineEmits(['maskStop','closeMask'])
	let topPxValue = ref(0);
	let topShowCopy = ref(true);
	let inputMaskHeight = ref(100);
	watchEffect(()=>{
		console.log(123);
		topShowCopy.value = props.topShow;
	})
	
	inputMaskHeight.value = `100vh`
	topPxValue.value = Number(props.topVal) + 'px';
	const sexFlagImage = ref(["../../../static/icon/男.png","../../../static/icon/女.png"]);
	// 点击禁止冒泡
	const maskStop = () => {
		emit('maskStop',true)
	}
	const btnClick = ()=> {
		console.log(12);
	}
	// 点击父组件
	const closeMask = () => {
		emit('closeMask',false);
	}
</script>

<style lang="scss" scoped>
	.input_mask{
		width: 750rpx;
		// height: 100vh;
		background-color: rgba(46, 46, 46,0.6);
		position: fixed;
		left: 0;
		z-index: 9999999;
		overflow: hidden;
		.search_box{
			width: 750rpx;
			height: 300rpx;
			overflow-y: auto;
			background-color: #fff;
			position: absolute !important;
			left: 0 !important;
			.li{
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				line-height: 80rpx;
				border-bottom: 1px solid #ccc;
				.sexFlag{
					width: 58rpx;
					height: 58rpx;
					vertical-align: middle;
					margin-left: 30rpx;
				}
				.name{
					margin-left: 20rpx;
				}
				.age{
					margin-left: 50rpx;
				}
				.mobile{
					float: right;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>